<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2024-04-18 21:20:24
 * @LastEditors: 陈波
 * @LastEditTime: 2024-04-19 22:47:34
 * @Description: 
 * @FilePath: \graDesign\src\views\DataBigScreen\SAC\components\2D\index2D.vue
-->
<template>
  <div class="plan2D-section">
    <!-- 左边大盒子 -->
    <div class="leftBox commonBox">
        <div class="left_top">
            <RewardsCompareLine />
        </div>
        <div class="left_bottom">
            <AccuracyCompareLine />
        </div>
    </div>
    <!-- 中间大盒子 -->
    <div class="midBox commonBox">
        <TotalAverageRadar />
    </div>
    <!-- 右边大盒子 -->
    <div class="rightBox commonBox">
        <div class="right_top">
            <PenaltyCompareLine />
        </div>
        <div class="right_bottom">
            <EnergyCompareLine />
        </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import RewardsCompareLine from './RewardsCompareLine.vue'
import PenaltyCompareLine from './PenaltyCompareLine.vue'
import AccuracyCompareLine from './AccuracyCompareLine.vue'
import EnergyCompareLine from './EnergyCompareLine.vue'
import TotalAverageRadar from './TotalAverageRadar.vue'
</script>

<style scoped lang="scss">
.plan2D-section {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .commonBox {
        height: 88vh;
    }
    .leftBox {
        width: 34%;
        .left_top, .left_bottom {
            width: 100%;
            height: 50%;
        }
    }
    .midBox {
        width: 30%;
        // height: 100%;
    }
    .rightBox {
        width: 34%;
        .right_top, .right_bottom {
            width: 100%;
            height: 50%;
        }

    }
}
</style>